<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%     
	String path = request.getContextPath();     
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";     
%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>新增需求</title>
	<base href="<%=basePath%>"/>
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" href="<%=basePath%>/js/uploadify/css/uploadify.css" type="text/css"></link>
    <link type="text/css" href="js/mcdropdown/css/jquery.mcdropdown.css" rel="stylesheet" media="all" />
    <script type="text/javascript" src="js/mcdropdown/lib/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/mcdropdown/lib/jquery.mcdropdown.js"></script>
    <script type="text/javascript" src="js/mcdropdown/lib/jquery.bgiframe.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/uploadify/jquery.uploadify-3.1.min.js"></script>
    <script language="JavaScript" type="text/javascript" src="<%=basePath%>js/my97/WdatePicker.js" defer="defer"></script>
	<style type="text/css"> 
	  fieldset,legend,form,table,tr,td,textarea{margin:0;padding:0}
	  form label {font-weight:bold;}
	  table{margin:10px 10px};
	  td{line-height: 25px;}
	  input[type="text"]{width:250px;}
	  input[type="password"]{width:250px;}
	  input[type="textarea"]{width:250px;}
	</style>
	<script type="text/javascript">
	  var reqId = null;  
	  $(document).ready(function(){
		     $('#enname').focus();
		     $.ajaxSetup ({ cache:false,async: false });
		     //异步提交表单
		     var options = {dataType: 'json', beforeSubmit: beforeSubmit, success: process};
		     $("#reqForm").submit(function(){
		         $(this).ajaxSubmit(options);
		          return false;
		     });   
	         //文件上传组件
		     $("#file_upload").uploadify({   
                  'height'        : 27,    
    	          'width'         : 80,     
    	          'buttonText'    : '添加附件',   
    	          'removeCompleted': false,         //上传完毕上传列表是否去除 
    	          'fileSizeLimit': '50MB',          //上传文件大小设置 单位可以是B、KB、MB、GB 
                  'swf'           : '<%=basePath%>/js/uploadify/uploadify.swf',   
    	          'uploader'      : '<%=basePath%>myreq/upload.do',   
    	          'auto'          : false,   
    	          'formData'      : {'reqId':''},  
    	          'fileTypeExts'  : '*.*',   
    	          'onUploadStart' : function(file) {   
    	                $("#file_upload").uploadify("settings","formData", {'reqId':reqId});   
    	           },   
    	          'onUploadSuccess':function(file, data, response){ 
		        	  $('#' + file.id).find('.data').html(' 上传完毕');
    	           },   
    	          'onUploadComplete':function(file){   
    	                $('#importLispDialog').window('close');   
    	           }   
		      });
	   });
	 
	   //提交前验证
	   function beforeSubmit() {
		     if(isEmpty($("#title").val())) { alert("标题不能为空！"); return false; }
		     if(isEmpty($("#expPerTime").val())) { alert("期望完成时间不能为空！"); return false; }
		     if(isEmpty($("#content").val())) { alert("需求内容不能为空！"); return false; }
		     return true;
	   }
	   function process(responseJson) {
		     if(responseJson.code == 0) {
		         $('#error_label').text("错误信息：" + responseJson.message);
		         $("#p_error").show();
		         return;
		     }
		     else
		     {   
		    	 $("#reqId").val(responseJson.reqId);
		    	 if(confirm('添加成功是否上传附件?'))
	          	 {  
		    		 $("#title").attr('disabled','true');
		    		 $("#content").attr('disabled','true');
		    		 $("#expPerTime").attr('disabled','true');
		    		 $("#btn_insert").attr('disabled','true');
	          	 }else
	          	 {
	          		 var qs = $("#qs").val();
	         	     location.href = "<%=basePath%>myreq/list.do?" + qs;
	          	 }
		     }
	   }  
	   function startUpload(){   
		  reqId = $("#reqId").val();
		  if(reqId.replace(/\s/g,'') == '')
		  {
			  alert("请先添写需求提交后再上传！");   
              return false;    
		  }else
	      {
			  $('#file_upload').uploadify('upload','*');   
	      }
	   }   
	   //返回列表页面
	   function btn_return(){
		     var qs = $("#qs").val();
	    	window.location.href="<%=basePath%>myreq/list.do?" + qs;
	   }
	</script>
</head>
<body>
  <div>
      <fieldset>
      <legend>新增需求：</legend>
      <form id="reqForm" method="post" action="myreq/insert.do">
        <input id="qs" name="qs" type="hidden" value="${qs}"/>
      	<p id = "p_error" style = "margin:10px 10px;">
      	    <label id="error_label" style="color:red;"></label>
      	</p>
        <table>
            <tr>
			    <td><label>发起人：</label>
			         <input type="hidden" name="reqId" id="reqId">
			    </td>
			    <td><input type="text"  value="${sessionScope.usercnname}" disabled="disabled" /><font color="red">&nbsp;*&nbsp;&nbsp;</font></td>
		    </tr>
		    <tr>
			    <td><label for="project">所属项目：</label>
			    </td>
			    <td>
                    <select name="project" id="project" style="width:256px;">
                       <c:forEach items="${projects}" var="p">
                          <option value="${p.id }">
                              ${p.name}
                          </option>
                       </c:forEach>
                    </select>
                    <font color="red">&nbsp;*&nbsp;&nbsp;</font>
                </td>
		    </tr>		
		    <tr>
				<td><label for="reqType">负责端：</label></td>
	            <td>
	               <select id="startStatus" name="startStatus" style="width:256px;">
		                <c:forEach var="i" items="${items}">
		                   <option value="${i.value}" >${i.name}</option>
		                </c:forEach>
	                </select>               
	            </td>       
		    </tr>		    
            <tr>
				<td><label for="expPerTime">期望完成时间：</label></td>
				<td>
			     	<input type="text" id="expPerTime" name="expPerTime" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',readOnly:true})" class="Wdate" /> <font color="red">&nbsp;*&nbsp;&nbsp;</font>     
				</td>
			</tr>
			<tr>
				<td><label for="title">标题：</label></td>
				<td>
	              <input type="text" id="title" name="title" style="width:498px;" /><font color="red">&nbsp;*&nbsp;&nbsp;</font>
				</td>
			</tr>
			<tr>
				<td valign="top"><label for="content">需求内容：</label></td>
				<td valign="top"><textarea name="content" id="content" cols="69" rows="8"></textarea><font color="red">&nbsp;*&nbsp;&nbsp;</font></td>
			</tr>
			<tr>
				<td></td>
				<td>
				    <input type="submit" id="btn_insert" value="提交" style="width: 80px;" />
				    <input type="button" id="btn_back" value="返回" onclick="btn_return();" style="width: 80px;" />
				</td>
			</tr>
        </table>
      </form>
    </fieldset>
    </div>
   	<div id="uploadDiv" >
		<fieldset>
		   <legend>上传附件：</legend>
		   <input type="file" name="uploadify" id="file_upload" />   
		   <hr>   
           <a onclick="startUpload();" href="javascript:void(0);">开始上传</a>    
           <a href="javascript:$('#file_upload').uploadify('cancel', '*')" >取消所有上传</a>   
        </fieldset>
    </div>
</body>
</html>